html, body{
    background: #000099;
    color: #ccccff;
    font-family: 'Ubuntu', sans-serif;
    font-size: 14px;
    text-align: center;
    margin: 0;
}

a{
    color: #fff;
    text-decoration: none;
    &:hover{
        text-decoration: underline;
    }
}

.wrapper{
    margin: 30px 0;
    display: inline-block;
    text-align: left;
    position: relative;
    width: 925px;
    @colWidth: 77px;    
    .col{
        width: @colWidth;
        display: table-cell;
        vertical-align: top;
        &.x2{
            width: @colWidth * 2
        }
        &.x3{
            width: @colWidth * 3
        }
        &.x4{
            width: @colWidth * 4
        }
        &.x5{
            width: @colWidth * 5
        }
        &.x6{
            width: @colWidth * 6
        }
        &.x7{
            width: @colWidth * 7
        }
        &.x8{
            width: @colWidth * 8
        }
        &.x9{
            width: @colWidth * 9
        }
        &.x10{
            width: @colWidth * 10
        }
        &.x11{
            width: @colWidth * 11
        }
        &.full{
            width: @colWidth * 12
        }
        .container{
            background: #004488;
            margin: 5px;
            padding: 5px;
            .header{
                margin: -5px -5px 5px -5px;
                padding: 5px;
                background: #225599;
            }
        }
    }
}


form{
    div.input{
        position: relative;
        margin-bottom: 4px;
        input[type="text"]{
            position: absolute;
            right: 0;
            margin: 0;
            border: none;
        }
        input[type="password"]{
            position: absolute;
            right: 0;
            margin: 0;
            border: none;
        }
        input[type="submit"]{
            position: absolute;
            right: 0;
            margin: 0;
            padding: 4px 10px;
            border: none;
            cursor: pointer;
        }
    }
}

.balancebar{
    padding: 2px;
    border: 1px solid #444;
    background: #222;
    border-radius: 4px;
    font-size: 18px;
}

/* VISUAL COUNTER*/

.visual-count{
    height: 33px;
    border: 2px inset #222;
    border-radius: 4px;
    overflow: hidden;
    text-align: right;    
    background: #28343b;
    display: inline-block;
    vertical-align: top;
    background: url();
    background: -moz-linear-gradient(top,  #28343b 0%, #000000 50%, #28343b 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#28343b), color-stop(50%,#000000), color-stop(100%,#28343b));
    background: -webkit-linear-gradient(top,  #28343b 0%,#000000 50%,#28343b 100%);
    background: -o-linear-gradient(top,  #28343b 0%,#000000 50%,#28343b 100%);
    background: -ms-linear-gradient(top,  #28343b 0%,#000000 50%,#28343b 100%);
    background: linear-gradient(to bottom,  #28343b 0%,#000000 50%,#28343b 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#28343b', endColorstr='#28343b',GradientType=0 );
    .scroller{
        position: relative;
        display: inline-block;
        vertical-align: top;
        margin: 0 1px;        
        .digit{
            background: #28343b;
            background: url();
            background: -moz-linear-gradient(top,  #28343b 0%, #b5bdc8 50%, #28343b 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#28343b), color-stop(50%,#b5bdc8), color-stop(100%,#28343b));
            background: -webkit-linear-gradient(top,  #28343b 0%,#b5bdc8 50%,#28343b 100%);
            background: -o-linear-gradient(top,  #28343b 0%,#b5bdc8 50%,#28343b 100%);
            background: -ms-linear-gradient(top,  #28343b 0%,#b5bdc8 50%,#28343b 100%);
            background: linear-gradient(to bottom,  #28343b 0%,#b5bdc8 50%,#28343b 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#28343b', endColorstr='#28343b',GradientType=0 );
            font-size: 15px;
            font-weight: bold;
            padding: 5px;
            border: 1px outset #222;
            margin: 1px 0;
            color: #111;
        }
        .digit.point{
            position: relative;
            background: none;
            color: #fff;
            border: 0;
            padding: 5px 0;
            top: 4px;
        }
    }
    .balance-tools{
        display: inline-block;
        vertical-align: top;        
        width: 33px;
        height: 33px;
        a{
            background: #28343b;
            background: url();
            background: -moz-linear-gradient(top,  #28343b 0%, #000000 99%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#28343b), color-stop(99%,#000000));
            background: -webkit-linear-gradient(top,  #28343b 0%,#000000 99%);
            background: -o-linear-gradient(top,  #28343b 0%,#000000 99%);
            background: -ms-linear-gradient(top,  #28343b 0%,#000000 99%);
            background: linear-gradient(to bottom,  #28343b 0%,#000000 99%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#28343b', endColorstr='#000000',GradientType=0 );

            display: block;
            height: 17px;
            margin: 0;
            text-align: center;
            font-size: 10px;            
            &:first-child{
                background: #000000;
                background: url();
                background: -moz-linear-gradient(top,  #000000 0%, #28343b 100%);
                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#28343b));
                background: -webkit-linear-gradient(top,  #000000 0%,#28343b 100%);
                background: -o-linear-gradient(top,  #000000 0%,#28343b 100%);
                background: -ms-linear-gradient(top,  #000000 0%,#28343b 100%);
                background: linear-gradient(to bottom,  #000000 0%,#28343b 100%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#28343b',GradientType=0 );
            }
            &:hover{
                background: #090;
            }
        }
    }
}